import React, { Component } from 'react';
import _ from 'lodash';
import Container from './Container';
import '../css/playlist.scss';
import { SongsId, SongsDetail } from './Main';
import { formatTime } from './FunctionComponents/FormatSeconds';
import { cloudMusicAxios } from './Data/jaxData';
import pauseIcon from '../img/pause.svg';
import './TinyComponents/Common';

export let SongInfo = {
      src: '',
      name: '',
      singer: '',
      coverUrl: '',
}

let loadingDisplay = 'block';
//播放列表组件
class SongItems extends Component {
      constructor(props) {
            super(props);
            this.state = {
                  dataList: [],
            };
            this.setDataList();
      }

      setDataList() {
            let Timer = setInterval(() => {
                  this.setState({
                        dataList: SongsDetail
                  });
                  if (SongsId && SongsDetail) {
                        if (SongsId.length === SongsDetail.length) {
                              loadingDisplay = 'none';
                              clearInterval(Timer);
                        }
                  }
            }, 300);
      }

      handleClickSongItem = (e) => {
            window.isPlaylistNext = true;
            SongInfo.name = e.currentTarget.dataset.name;
            SongInfo.singer = e.currentTarget.dataset.singer;
            SongInfo.coverUrl = e.currentTarget.dataset.coverurl;
            cloudMusicAxios.get('/music/url', {
                  params: {
                        id: e.currentTarget.dataset.id,
                  }
            })
                  .then((response) => {
                        SongInfo.src = _.map(_.map(response, 'data')[0], 'url');
                  })
                  .catch((error) => {
                        console.log(error);
                  });

            let playPauseBtn = document.querySelector('.play-pause button');
            playPauseBtn.style.backgroundImage = 'url(' + pauseIcon + ')';
      }

      shouldComponentUpdate(nextState) {
            if (this.state.dataList === nextState) {
                  return false;
            } else {
                  return true;
            }
      }

      render() {
            return (
                  <div className="main-container">
                        {this.state.dataList.map((list, i) => {
                              return (
                                    <div className="Song-container" key={_.map(list, 'id')} onClick={this.handleClickSongItem} data-id={_.map(list, 'id')} data-coverurl={_.map(_.map(list, 'al'), 'picUrl')} data-name={_.map(list, 'name')} data-singer={(_.join(_.map(_.map(list, 'ar')[0], 'name'), ' & ')).substring(0, 80)}>
                                          <div className="number">{i + 1}</div>
                                          <div className="songname">{_.map(list, 'name')}</div>
                                          <div className="singer">{(_.join(_.map(_.map(list, 'ar')[0], 'name'), ' & ')).substring(0, 40)}</div>
                                          <div className="album">{(_.map(_.map(list, 'al'), 'name')[0]).substring(0, 32)}</div>
                                          <div className="duration">{_.map(_.map(list, 'dt'), (v) => {
                                                return formatTime(v * 0.001);
                                          })}</div>
                                    </div>
                              )
                        })}
                  </div>
            )
      }
}


class Playlist extends Component {
      constructor(props) {
            super(props);
            this.state = {
                  xloadingDisplay: 'block',
            };
            let Timer = setInterval(() => {
                  this.setState({
                        xloadingDisplay: loadingDisplay
                  })
                  if (this.state.xloadingDisplay === 'none') {
                        clearInterval(Timer);
                  }
            }, 300)
      }

      render() {
            return (
                  <Container title="播放列表">
                        <div style={{ display: this.state.xloadingDisplay }} className="loading-container">
                              <div className="flex-container">
                                    正在加载...
                              </div>
                        </div>
                        <div className="head">
                              <div className="number-head"></div>
                              <div className="songname-head">音乐标题</div>
                              <div className="singer-head">歌手</div>
                              <div className="album-head">专辑</div>
                              <div className="duration-head">时长</div>
                        </div>
                        <SongItems></SongItems>
                  </Container>
            )
      }
}

export default Playlist;
